<template>
  <div class="app-container">
    <Pagetitle
      :title="pageTitle.title"
      :name="pageTitle.name"
      :btnName="pageTitle.btnName"
      @btnFun="btnFun"
    ></Pagetitle>
    <div class="filter-container">

    </div>
    <div class="table-container">
      <Table
        stripe
        :loading="dataTable.loading"
        :border="dataTable.border"
        :columns="dataTable.columns"
        :data="dataTable.data"
      >
        <template
          slot-scope="{row,index}"
          slot="score"
        >

          <span v-if="!row.$isEdit">
            {{row.score}}
          </span>
          <Input
            v-model="row.score"
            placeholder="请输入分值"
            @on-change="getInputValue"
            v-else
          ></Input>
        </template>
        <template
          slot-scope="{row,index}"
          slot="action"
        >
          <div
            class="btn-table-box"
            v-if="!row.$isEdit"
          >
            <div
              class="btn-text-blue"
              @click="handleEdit(row)"
            >编辑</div>

          </div>
          <div
            class="btn-table-box"
            v-else
          >
            <div
              class="btn-text-blue"
              @click="handleCanle(row)"
            >取消</div>
            <div
              class="btn-text-blue"
              @click="handleSave(row)"
            >保存</div>
          </div>
        </template>
      </Table>

      <Row class="mtop20">
        <Col
          :md="4"
          class="flex-start-center height-30 page"
        >
        <div>
          共{{count}}条
          <Select
            v-model="limit"
            size="small"
            class="lz-select-width"
            @on-change="changePageSize(1)"
          >
            <Option
              v-for="item in pageSizeSeletc"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </div>
        </Col>
        <Col
          :md="12"
          class="flex-center-center height-30"
        >
        <Page
          v-if="pageshow"
          :total="count"
          :page-size="limit"
          @on-change="changePageSize"
          size="small"
          show-elevator
        />
        </Col>
        <Col :md="8">

        </Col>
      </Row>
    </div>

    <Modal
      v-model="addMaterialModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="addMaterialForm"
          :model="addMaterialForm"
          :rules="ruleValidate"
          :label-width="100"
        >
          <div class="modal-header">
            <span>物料新增</span>
            <a @click="closeModal('addMaterialForm')">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <Row>
              <Col
                :span="12"
                offset="6"
              >
              <FormItem
                label="部门"
                prop="departmentId"
              >
                <Select
                  v-model="addMaterialForm.departmentId"
                  placeholder="全部部门"
                >
                  <Option value="">全部部门</Option>
                  <Option
                    v-for="(depart,index) in departmentListSelect"
                    :key="depart.id"
                    :value="depart.id"
                  >{{depart.departmentName}}</Option>
                  </Option>
                </Select>
              </FormItem>
              <FormItem
                label="一级物料"
                prop="firstMaterial"
              >
                <Select
                  v-model="addMaterialForm.firstMaterial"
                  placeholder="全部一级物料"
                >
                  <Option value="">全部一级物料</Option>
                  <template v-for="first in firstMaterialSelect">
                    <Option
                      :key="first.id"
                      :value="first.firstMaterial"
                    >{{first.firstMaterial}}</Option>
                  </template>
                </Select>
              </FormItem>
              <FormItem
                label="二级物料"
                prop="secondMaterial"
              >
                <Input
                  v-model="addMaterialForm.secondMaterial"
                  placeholder="请输入二级物料"
                ></Input>
              </FormItem>




              <FormItem
                label="三级物料"
                prop="thirdMaterial"
              >
                <Input
                  v-model="addMaterialForm.thirdMaterial"
                  placeholder="请输入三级物料"
                ></Input>
              </FormItem>
              <FormItem
                label="客户端类型"
                prop="client"
              >
                <Input
                  v-model="addMaterialForm.client"
                  placeholder="请输入客户端类型"
                ></Input>
              </FormItem>
              <FormItem
                label="新增/修改"
                prop="type"
              >
                <Input
                  v-model="addMaterialForm.type"
                  placeholder="请输入新增/修改"
                ></Input>
              </FormItem>
              <FormItem
                label="修改类型"
                prop="updateType"
              >
                <Input
                  v-model="addMaterialForm.updateType"
                  placeholder="请输入修改类型"
                ></Input>
              </FormItem>




              <FormItem
                label="物料分值"
                prop="score"
              >
                <Input
                  v-model="addMaterialForm.score"
                  placeholder="请输入物料分值"
                ></Input>
              </FormItem> 
              </Col>
            </Row>
          </div>
          <div class="modal-footer">
            <Button @click="closeModal('addMaterialForm')">取消</Button>
            <Button
              type="primary"
              @click="handleSubmitMaterial('addMaterialForm')"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  fetchMaterialList,
  fetchEditorMaterial,
  fetchAddMaterial,
  fetchMaterialContent
} from "@/api/table";
import { Pagetitle, Model } from "@/components";
export default {
  data() {
    return {
      pageshow: true,
      //总页码
      count: 0,
      //页码
      currentPage: 1,
      //总条数
      limit: 10,
      pageSizeSeletc: [
        {
          value: 10,
          label: "10条/页"
        },
        {
          value: 20,
          label: "20条/页"
        }
      ],
      modal1: false,
      pageTitle: {
        title: "物料管理",
        name: "新增物料",
        btnName: "btnFun"
      },
      dataTable: {
        loading: false,
        border: false,
        columns: [
          {
            minWidth: 100,
            title: "部门",
            key: "departmentName"
          },
          {
            minWidth: 100,
            title: "一级物料",
            key: "firstMaterial"
          },
          {
            minWidth: 100,
            title: "二级物料",
            key: "secondMaterial"
          },
          {
            minWidth: 100,
            title: "三级物料",
            key: "thirdMaterial"
          },
          {
            minWidth: 100,
            title: "客户端类型",
            key: "clientType"
          },
          {
            minWidth: 100,
            title: "修改类型",
            key: "updateType"
          },
          {
            minWidth: 100,
            title: "新增/修改",
            key: "addUpdate"
          },
          {
            minWidth: 100,
            title: "分值",
            slot: "score"
          },
          {
            minWidth: 100,
            title: "操作",
            slot: "action"
          }
        ],
        data: []
      },
      addMaterialModal: false,
      firstMaterialSelect: [],
      departmentListSelect: [],

      addMaterialForm: {
        departmentId: "",
        firstMaterial: "",
        secondMaterial: "",
        thirdMaterial: '',
        client: '',
        type: '',
        updateType: '',
        score: ""
      },
      editorMaterielForm: {
        score: ""
      },
      ruleValidate: {
        secondMaterial: [
          {
            required: true,
            message: "填写二级物料",
            trigger: "blur"
          }
        ],
        thirdMaterial: [
          {
            required: true,
            message: "填写三级物料",
            trigger: "blur"
          }
        ],
        client: [
          {
            required: true,
            message: "填写客户端类型",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "填写新增/修改",
            trigger: "blur"
          }
        ],
        updateType: [
          {
            required: true,
            message: "填写修改类型",
            trigger: "blur"
          }
        ],
        score: [
          {
            required: true,
            message: "填写物料分值",
            trigger: "blur"
          }
        ],
        firstMaterial: [
          {
            required: true,
            message: "选择一级物料",
            trigger: "change"
          }
        ],
        departmentId: [
          {
            required: true,
            message: "选择部门",
            trigger: "change",
            type: "number"
          }
        ]
      },
      oldScore: 0
    };
  },
  components: {
    Pagetitle,
    Model
  },
  mounted() {
    this.getMaterialList();
    this.getMaterialContent();
  },
  methods: {
    //分页
    changePageSize(index) {
      this.currentPage = index;
      this.getMaterialList();
    },
    async getMaterialList() {
      this.dataTable.loading = true;
      const res = await fetchMaterialList({
        pageNo: this.currentPage,
        pageSize: this.limit
      });
      this.dataTable.loading = false;
      this.count = res.data.total;
      this.dataTable.data = [];
      res.data.list.forEach(item => {
        const data = {};
        data.departmentName = item.departmentName;
        data.firstMaterial = item.firstMaterial;
        data.secondMaterial = item.secondMaterial;
        data.thirdMaterial = item.thirdMaterial;
        data.addUpdate = item.addUpdate
        data.updateType = item.updateType
        data.clientType = item.clientType
        data.score = item.score;
        data.materialId = item.materialId;
        data.$isEdit = false;
        this.dataTable.data.push(data);
      });
    },
    handleEdit(row) {
      this.oldScore = row.score;
      this.$set(row, "$isEdit", true);
    },
    handleSave(row) {
      this.editorMaterial(row);
      this.$set(row, "$isEdit", false);
    },
    handleCanle(row) {
      row.score = this.oldScore;
      this.$set(row, "$isEdit", false);
    },
    async editorMaterial(row) {
      await fetchEditorMaterial({
        materialId: row.materialId,
        score: row.score
      });
      this.$Message.success("修改成功");
    },
    getInputValue(e) {
      this.editorMaterielForm.score = e.target.value;
    },
    async addMaterial(name) {
      await fetchAddMaterial({
        departmentId: this.addMaterialForm.departmentId,
        firstMaterial: this.addMaterialForm.firstMaterial,
        secondMaterial: this.addMaterialForm.secondMaterial,
        thirdMaterial: this.addMaterialForm.thirdMaterial,
        clientType: this.addMaterialForm.client,
        addUpdate: this.addMaterialForm.type,
        updateType: this.addMaterialForm.updateType,
        score: this.addMaterialForm.score
      });
      this.closeModal(name);
      this.$Message.success("添加成功");
    },
    btnFun() {
      this.addMaterialModal = true;
    },

    async getMaterialContent() {
      const res = await fetchMaterialContent();
      this.departmentListSelect = [];
      //部门
      res.data.departmentList.forEach(item => {
        const data = {};
        data.id = item.id;
        data.departmentName = item.departmentName;
        this.departmentListSelect.push(data);
      });
      //一级物料
      res.data.materialList.forEach(item => {
        const data = {};
        data.departmentId = item.departmentId;
        data.id = item.id;
        data.firstMaterial = item.firstMaterial;
        this.firstMaterialSelect.push(data);
      });
    },
    go(url) {
      this.$router.push({
        path: url
      });
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    closeModal(name) {
      this.resetForm(name);
      this.addMaterialModal = false;
    },
    handleSubmitMaterial(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.addMaterial(name);
        }
      });
    }
  }
};
</script>
<style >
.ivu-input-icon + .ivu-input {
  padding-right: 7px;
}
</style>